<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>套餐管理</title>

  <link rel="stylesheet" href="../css/dish.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="package" style="height: 100%">
  <header>
    <h2 style="line-height: 60px; margin-left: 50px;">套餐管理</h2>
  </header>
  <main>
    <div class="main-center">
      <div class="submit">
        <el-input
                style="width: 300px;margin: 10px"
                placeholder="请输入套餐名称"
                prefix-icon="el-icon-search"
                v-model="package.name"
                clearable
                @clear="clear"
                @change="change">
        </el-input>
        <el-row style="float: right;width: 450px;display: flex;justify-content: space-around;align-items: center;margin: 10px">
          <el-link type="danger" @click="deletepackagees">批量删除</el-link>
          <span style="opacity: 0.3;">|</span>
          <el-link type="primary" @click="startOfSale" >批量启售</el-link>
          <span style="opacity: 0.3;">|</span>
          <el-link type="danger" @click="haltTheSales">批量禁售</el-link>
          <span style="opacity: 0.3;">|</span>
          <el-button :loading="loading" type="warning" @click="dialogVisible = true">+新增套餐</el-button>
        </el-row>
      </div>
      <div class="main-table" style="width: 95%; margin: 0 auto">
        <template>
          <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  size="mini"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
                    align="center">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="name"
                    label="套餐名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="img"
                    label="图片"
                    width="120">
              <template slot-scope="scope" align="center">
                <div class="demo-image__placeholder">
                  <div class="block">
                    <el-image :src="scope.row.img"  style="height: 35px">
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                      <div slot="error" class="image-slot" style="line-height: 35px;font-size: 20px">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="typesName"
                    label="套餐分类"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="price"
                    label="售价"
                    width="100px"
                    show-overflow-tooltip>
              <template slot-scope="scope">{{ "￥" + scope.row.price }}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="state"
                    label="售卖状态"
                    show-overflow-tooltip>
              <template slot-scope="scope">{{scope.row.state == 1?"起售":"禁售"}}</template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="updateTime"
                    label="最后操作时间"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                        type="text"

                        @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <span style="opacity: 0.3;">|</span>
                <el-button
                        type="text"
                        :plain="false"
                        @click="handleStop(scope.$index, scope.row)">{{scope.row.state == 1?"禁售":"起售"}}
                </el-button>
                <span style="opacity: 0.3;">|</span>
                <el-button
                        style="color: red"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>

    </div>

    <div class="page-info">
      <template>
        <div class="block">
          <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageTool.pageNo"
                  :page-sizes="[5, 10]"
                  :page-size="5"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageTool.pageTotal">
          </el-pagination>
        </div>
      </template>
    </div>
    <!--        新增弹窗-->
    <el-dialog
            title="新增套餐"
            :visible.sync="dialogVisible"
            width="30%"

            :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="套餐名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="图片上传">
          <el-upload
                  :limit="1"
                  :file-list="fileList"
                  action="http://localhost:8080/LS03_vuejs/package/upload"
                  class="upload-demo"
                  name="upload"
                  :on-success="upload"
                  list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="套餐分类">
          <template>
            <el-select v-model="form.typesName" placeholder="请选择">
              <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="售卖状态">
          <el-select v-model="form.state" placeholder="请选择售卖状态">
            <el-option label="起售" value="1"></el-option>
            <el-option label="禁售" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onsubmit">提 交</el-button>
            </span>
    </el-dialog>
    <!--        修改弹窗-->
    <el-dialog
            title="修改套餐"
            :visible.sync="dialogVisibleUpdate"
            width="30%"

            :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="套餐名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="套餐分类">
          <template>
            <el-select v-model="form.typesName" placeholder="请选择">
              <el-option
                      v-for="item in options"
                      :key="item"
                      :label="item"
                      :value="item">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="售卖状态">
          <el-select v-model="form.state" placeholder="请选择售卖状态">
            <el-option :key="1" label="起售" :value="1"></el-option>
            <el-option :key="0" label="禁售" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
                <el-button type="primary" @click="updatepackage">提 交</el-button>
            </span>
    </el-dialog>
  </main>
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var package = new Vue({
    el: "#package",
    data: {
      package: {
        name: ""
      },
      fileList:[],
      message:"",
      form: {
        name:"",
        img:null,
        typesName:"",
        price:"",
        state:null,
      },
      loading: false,
      tableData: [
        // {
        // packageName: "宫爆鸡丁",
        // img: "null",
        // typesName: "川菜",
        // price: "120",
        // status: "起售",
        // updateTime: "2024-05-06 21:10:10"
        // },
      ],
      //多选框数据
      multipleSelection: [],
      //d打开form表单
      dialogVisible: false,
      dialogVisibleUpdate:false,
      //设置套餐分类名称
      options:[],
      value:null,
      //页数相关
      pageTool: {
        pageTotal:null,
        pageSize: "5",
        pageNo: 1
      },
    },
    methods: {

      selectAllByTypesName(){
        that = this;
        axios.get("http://localhost:8080/LS03_vuejs/package/selectAllByTypesName").then(res=>{
          console.log(res.data);
          that.options = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },

      change() {
        that = this;
        //输入框事件
        //console.log("hahah")
        axios.post("http://localhost:8080/LS03_vuejs/package/selectByName", this.package).then(res => {
          that.tableData=[];
          console.log(res.data);
          if(res.data != null){
            that.tableData.push(res.data);
          }

          // console.log(that.tableData);
        }).catch(err => {
          console.log(err);
        })
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection)
      },
      //批量起售
      startOfSale(){
        if (this.multipleSelection.length == 0){
          this.$message.warning("请选择对象后再试！！！")
        }else {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            this.multipleSelection[i].state = 1;
          }
          axios.post("http://localhost:8080/LS03_vuejs/package/updateByCode",this.multipleSelection).then(res=>{
            // console.log(res.data);
            if (res.data){
              this.$message.success("修改成功！！！");
            }else {
              this.$message.error("出错了，请稍后再试！！！");
            }
            this.multipleSelection = [];
            this.selectpackage();
          }).catch(err=>{
            console.log(err);
          });
        }
      },
      //批量停售
      haltTheSales(){
        if (this.multipleSelection.length == 0){
          this.$message.warning("请选择对象后再试！！！")
        }else {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            this.multipleSelection[i].state = 0;
          }
          axios.post("http://localhost:8080/LS03_vuejs/package/updateByCode",this.multipleSelection).then(res=>{
            // console.log(res.data);
            if (res.data){
              this.$message.success("修改成功！！！");
            }else {
              this.$message.error("出错了，请稍后再试！！！");
            }
            this.multipleSelection = [];
            this.selectpackage();
          }).catch(err=>{
            this.multipleSelection = [];
            console.log(err);
          });
        }
      },
      //row具体内容
      //停售
      handleStop(index, row) {
        that = this;
        // console.log(index, row);
        if (row.state == 0){
          row.state++;
        }else {
          row.state--;
        }
        this.multipleSelection.push(row);
        axios.post("http://localhost:8080/LS03_vuejs/package/updateByCode",this.multipleSelection).then(res=>{
          // console.log(res.data);
          if (res.data){
            this.$message.success("修改成功！！！");

          }else {
            this.$message.error("出错了，请稍后再试！！！");

          }
          this.multipleSelection=[];
          this.selectpackage()
        }).catch(err=>{
          this.$message.error("出错了，请稍后再试！！！");
          if (row.state == 0){
            row.state++;
          }else {
            row.state--;
          }
          console.log(err);
        });
      },
      //修改
      handleEdit(index, row) {
        // console.log(index, row);
        this.form = Object.assign({},row);
        this.dialogVisibleUpdate = true;
      },
      //批量删除
      deletepackagees(){
        that = this;
        axios.post("http://localhost:8080/LS03_vuejs/package/deleteByCode",this.multipleSelection).then(res=>{
          if (res.data){
            this.$message.success("删除成功！！！")

          }else {
            this.$message.error("出错了，请稍后再试！！");
          }
          that.multipleSelection=[];
          this.selectpackage();
        }).catch(err=>{
          console.log(err);
        })
      },
      handleDelete(index, row) {
        // console.log(index, row);
        this.multipleSelection.push(row)
        axios.post("http://localhost:8080/LS03_vuejs/package/deleteByCode",this.multipleSelection).then(res=>{
          if (res.data){
            this.$message.success("删除成功！！！")
            this.multipleSelection=[];
            this.selectpackage();
          }else {
            this.multipleSelection=[];
            this.$message.error("出错了，请稍后再试！！");
          }
        }).catch(err=>{
          console.log(err);
        })
      },
      //修改页面显示多少条数 val为数值
      handleSizeChange(val) {
        // console.log(val)
        this.pageTool.pageSize = val;
        this.selectpackage();
      },

      //页码发生变化
      handleCurrentChange(val) {
        // console.log(val)
        this.pageTool.pageNo = val;
        this.selectpackage();
      },

      //关闭提示框
      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {
                });
      },
      //提交表单
      onsubmit(){
        that = this;

        axios.post("http://localhost:8080/LS03_vuejs/package/add",this.form).then(res=>{
          // console.log(res.data)
          that.dialogVisible = false;
          if (res.data){
            this.$message.success("添加成功！！！")
          }else {
            this.$message.warning("添加失败，请稍后再试！！！")
          }
          that.form={};
          this.fileList=[];
          that.selectpackage();
        }).catch(err=>{
          console.log(err);
        })
      },
      upload(response, file, fileList){
        this.form.img = response;

      },
      //获取总数据
      selectCount(){
        that = this;
        axios.get("http://localhost:8080/LS03_vuejs/package/selectCount").then(res=>{
          // console.log(res.data);
          that.pageTool.pageTotal = res.data;
        }).catch(err=>{
          console.log(err)
        })
      },
      //获取全部数据
      selectpackage(){
        that = this;
        axios.post("http://localhost:8080/LS03_vuejs/package/selectAll",this.pageTool).then(res=>{
          that.tableData = res.data;
        }).catch(err=>{
          console.log(err)
        })
      },
      updatepackage(){
        this.multipleSelection.push(this.form);
        axios.post("http://localhost:8080/LS03_vuejs/package/updateByCode",this.multipleSelection).then(res=>{
          if (res.data){
            this.$message.success("修改套餐信息成功！！！");
          }else {
            this.$message.error("出错了，请稍后再试！！！");
          }
          this.dialogVisibleUpdate = false;
          this.form={};
          this.multipleSelection = [];
          this.selectpackage();

        }).catch(err=>{
          this.multipleSelection = [];
          console.log(err);
        })
      },
      clear(){
        this.selectpackage();
      },


    },
    mounted(){
      this.selectAllByTypesName();
      this.selectCount();
      this.selectpackage();
    }
  })
</script>
</html>